<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>舒尔特方格</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>

  <div id="root">
    <header>
      <h1 class="title">舒尔特方格</h1>
    </header>

    <div id="paper">
      <div id="container"></div>
    </div>

    <footer>
      <label>
        边长：<input type="number" name="lengthOfSide" id="lengthOfSide" max="10" min="1" value="5" placeholder="请输入边长" />
      </label>
      <label hidden id="maxNumWrap">
        最大数：<input type="number" name="maxNum" id="maxNum" max="99" min="0" value="99" placeholder="最大数" />
      </label>

      <label>
        类型：<select name="type" id="type">
          <option value="ziMu" selected>字母</option>
          <option value="shengMu">生母</option>
          <option value="yunMu">韵母</option>
          <option value="shuZi">数字</option>
          <option value="zhengTiRenDuYinJie">整体认读音节</option>
        </select>
      </label>

      <label>
        数量：<select name="tableNum" id="tableNum">
          <option value="1">单表</option>
          <option value="2" selected>双表</option>
        </select>
      </label>

      <button id="refresh">刷新</button>

      <button id="print">打印</button>
    </footer>
  </div>

  <script type="module" src="./index.js"></script>
</body>

</html>